<template>
  <base-page-container activeTab="index">
    <template #header>
      <view class="page-header">
        <up-navbar
          bgColor="#E0F7FA"
          :safeAreaInsetTop="true"
          :placeholder="false"
          fixed>
          <template #left>
            <up-image
              :show-loading="true"
              src="http://www.adnaan.cn/chinese-images/logo.png"
              width="60rpx"
              height="60rpx"
              radius="10rpx"></up-image>
          </template>
          <template #center>
            <view style="width: 400rpx; transform: translateX(-50rpx)">
              <up-search
                inputAlign="left"
                height="25"
                :showAction="false"
                bgColor="transparent"
                disabled
                @click="toPage('/pages/list/list')"
                borderColor="#ddd"></up-search>
            </view>
          </template>
        </up-navbar>
      </view>
    </template>
    <template #content>
      <view
        style="margin-top: 100rpx; padding-bottom: 40rpx"
        class="flex-column">
        <view class="bg-color-white m-30">
          <up-swiper
            :list="banner"
            keyName="image"
            showTitle
            :autoplay="true"
            circular
            :indicatorDots="true"
            :indicatorColor="'#999'"
            :indicatorActiveColor="'#333'"
            :duration="500"
            height="150"></up-swiper>
        </view>
        <view class="quick-entrance">
          <view
            class="left-item bg-color-success shadow-blur b-rd-20"
            @click="toPage('/pages/camera/camera')">
            <up-icon size="80" color="#fff" name="camera"></up-icon>
            <text class="label">拍照识别</text>
          </view>
          <view
            class="right-top-item bg-color-bluepurple shadow-blur b-rd-20"
            @click="toPage('/pages/ai-chat/ai-chat')">
            <up-icon
              size="80"
              color="#fff"
              name="http://www.adnaan.cn/chinese-images/icon/robot.png"></up-icon>
            <text class="label" style="margin-left: 15rpx">AI问答</text>
          </view>
          <view
            class="right-bottom-item bg-color-indigo shadow-blur b-rd-20"
            @click="toPage('/pages/list/list')">
            <up-icon size="80" color="#fff" name="order"></up-icon>
            <text class="label">科普专栏</text>
          </view>
        </view>
        <!-- 季节养生提醒卡片 -->
        <view class="recommend-card" @click="toggleCard">
          <view class="card" :class="{ flipped: isFlipped }">
            <!-- 卡片正面 -->
            <view class="card-front">
              <view class="header">
                <text class="season">{{ season }}</text>
                <view class="city-info">
                  <up-icon size="24" name="map"></up-icon>
                  <text class="city">{{ weather.city }}</text>
                </view>
              </view>
              <view class="quote">"春日食鲜，健康相伴。"</view>
              <view class="weather-info">
                <text>温度：{{ weather.current.temp }}°C</text>
                <text>
                  风力：{{ weather.current.wind }}
                  {{ weather.current.windSpeed }}
                </text>
              </view>
            </view>

            <!-- 卡片背面 -->
            <view class="card-back">
              <view class="recommendation">
                <view class="category">
                  <view class="category-title">饮食推荐</view>
                  <view
                    class="recommend-item"
                    v-for="(item, index) in recommendations.diet"
                    :key="index">
                    <text class="text-overflow-1">{{ item }}</text>
                  </view>
                </view>
                <view class="category">
                  <view class="category-title">运动建议</view>
                  <view
                    class="recommend-item"
                    v-for="(item, index) in recommendations.exercise"
                    :key="index">
                    <text class="text-overflow-1">{{ item }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="contact m-x-30">
          <base-card-container
            title="推荐阅读"
            @more="toPage('/pages/list/list')">
            <template v-if="recommendArticle.length > 0" #content>
              <view
                @click="toDetail(v.id)"
                v-for="v in recommendArticle"
                :key="v.id"
                class="flex bg-color-white p-20 m-y-20 b-rd-6">
                <view class="flex-1 flex-c-around-start">
                  <up-text
                    bold
                    color="#000"
                    size="32rpx"
                    lines="1"
                    :text="v.title"></up-text>
                  <up-text
                    color="#AAA"
                    size="28rpx"
                    lines="2"
                    :text="v.description"></up-text>
                  <view class="flex-r-between-center m-t-10">
                    <up-tag
                      v-for="item in v.tags"
                      :key="item.value"
                      :text="item.label"
                      type="warning"
                      shape="circle"
                      size="mini"></up-tag>
                  </view>
                </view>
                <up-image
                  :show-loading="true"
                  :src="viewImg(v.cover)"
                  width="200rpx"
                  height="200rpx"
                  radius="10rpx"></up-image>
              </view>
            </template>
            <template v-else #content>
              <up-empty
                text="暂无内容"
                icon="http://www.adnaan.cn/chinese-images/empty-2.png"></up-empty>
            </template>
          </base-card-container>
        </view>
      </view>
    </template>
  </base-page-container>
</template>

<script setup>
import { getWeather_api } from "@/api/api";
import { onLoad } from "@dcloudio/uni-app";
import { getLocation } from "@/utils/location";
import { getCurrentSeason } from "@/utils/season";
import { getRecommendations } from "@/utils/recommend";
import { getBanner_api, getRecommendArticle_api } from "@/api/api";
import { viewImg } from "@/utils/image";
// 定义卡片是否翻转的状态
const isFlipped = ref(false);
// 切换卡片翻转状态的函数
const toggleCard = () => {
  isFlipped.value = !isFlipped.value;
};
const banner = ref([]);

const toPage = (url) => {
  uni.switchTab({
    url: url,
  });
};

const toDetail = (id) => {
  uni.navigateTo({
    url: `/subPackages/article/detail?id=${id}`,
  });
};
const season = getCurrentSeason();
const weather = ref({
  current: {
    temp: 0,
    wind: "",
    windSpeed: "",
  },
  city: "",
});
// 定义美食推荐数据
const recommendations = ref({
  diet: [],
  exercise: [],
});
const getWeather = async () => {
  const city = await getLocation();
  getWeather_api({ city }).then((res) => {
    if (res.code == 200) {
      const { current, city } = res.data;
      weather.value = { current, city };
      recommendations.value = getRecommendations(season, current.temp);
    }
  });
};
const getBanner = () => {
  getBanner_api().then((res) => {
    if (res.code == 200) {
      banner.value = res.data.map((item) => {
        return {
          id: item.id,
          image: viewImg(item.image),
          link: item.link,
          title: item.title,
        };
      });
    }
  });
};
const recommendArticle = ref([]);
const getRecommend = async () => {
  const res = await getRecommendArticle_api();
  recommendArticle.value = res.data.map((item) => {
    return {
      id: item.id,
      cover: viewImg(item.cover),
      tags: item.tags,
      description: item.description,
      title: item.title,
      recommendScore: item.recommendScore.toFixed(2),
    };
  });
};
onLoad(async () => {
  getBanner();
  getWeather();
  getRecommend();
});
</script>

<style lang="scss">
.page-header {
  width: 100%;
}
.quick-entrance {
  width: 100%;
  height: 500rpx;
  display: grid;
  grid-template-columns: 40% auto;
  grid-template-rows: 1fr 1fr; /* 两行，高度平分 */
  gap: 10px 10px; /* 网格项之间的水平和垂直间距 */
  padding: 20rpx 30rpx;
  box-sizing: border-box;
  .label {
    color: #fff;
    font-size: 36rpx;
    font-weight: bold;
  }
  .left-item {
    grid-row: span 2; /* 左侧方块跨越两行 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .right-top-item,
  .right-bottom-item {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.recommend-card {
  margin: 20rpx 30rpx;
  position: relative;

  .card {
    width: 100%;
    height: 360rpx;
    position: relative;
    border-radius: 40rpx;
    overflow: hidden;
    transition: all 0.6s ease-in-out;
  }

  .card-front,
  .card-back {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 40rpx;
    box-shadow: 0 16rpx 40rpx rgba(50, 50, 93, 0.08);
    padding: 30rpx;
    box-sizing: border-box;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    transition: all 0.6s ease-in-out;
  }

  .card-front {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-image: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.7) 100%
      ),
      url("https://img1.baidu.com/it/u=1117949050,2033758512&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500");
    background-size: cover;
    background-position: center;
    transform: rotateY(0deg);
    opacity: 1;
    z-index: 2;
  }

  .card-back {
    background: linear-gradient(135deg, #ffffff 0%, #f0f5f4 100%);
    opacity: 0;
    transform: rotateY(180deg);
    z-index: 1;
  }

  .card.flipped {
    .card-front {
      transform: rotateY(180deg);
      opacity: 0;
      z-index: 1;
    }

    .card-back {
      transform: rotateY(0deg);
      opacity: 1;
      z-index: 2;
    }
  }

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16rpx;
    margin-bottom: 24rpx;
    padding-bottom: 20rpx;
    border-bottom: 2rpx solid rgba(46, 204, 113, 0.2);
    .city-info {
      display: flex;
      align-items: center;
      gap: 8rpx;
    }
  }

  .season {
    font-size: 48rpx;
    color: #2ecc71;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(46, 204, 113, 0.1);
  }

  .location-icon {
    width: 48rpx;
    height: 48rpx;
    opacity: 0.8;
  }

  .city {
    font-size: 36rpx;
    color: #2c3e50;
    font-weight: 500;
  }

  .quote {
    font-style: italic;
    color: #34495e;
    font-size: 32rpx;
    margin: 30rpx 0;
    letter-spacing: 1rpx;
    line-height: 1.4;
    text-align: center;
    font-weight: 500;
  }

  .weather-info {
    display: flex;
    justify-content: space-around;
    margin-top: 24rpx;
    padding: 20rpx;
    background: rgba(46, 204, 113, 0.08);
    border-radius: 16rpx;

    text {
      font-size: 28rpx;
      color: #34495e;
      font-weight: 500;
    }
  }

  .recommendation {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16rpx;
    padding: 10rpx 0;
  }

  .category {
    background-color: rgba(46, 204, 113, 0.05);
    padding: 24rpx;
    border-radius: 24rpx;
  }

  .category-title {
    font-size: 32rpx;
    color: #2ecc71;
    margin-bottom: 16rpx;
    font-weight: bold;
    display: flex;
    align-items: center;

    &::before {
      content: "";
      display: inline-block;
      width: 6rpx;
      height: 28rpx;
      background: #2ecc71;
      margin-right: 10rpx;
      border-radius: 4rpx;
    }
  }

  .recommend-item {
    margin: 12rpx 0;
    color: #34495e;
    font-size: 26rpx;
    padding: 10rpx 16rpx;
    border-radius: 12rpx;
    background: rgba(255, 255, 255, 0.6);

    text {
      color: #34495e;
    }
  }
}
</style>
